<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!--总结条件渲染
    
    1.v-if (1).v-if="表达式"
           (2).v-else-if="表达式"
           (3).v-else="表达式"
           适用于:切换频率较低的场景
           特点:不展示DOM元素直接被移除
           注意：v-if可以和v-else-if,v-else一起使用，但要求结构不能被打断
    
    2.v-show:写法 v-show="表达式"
    适用于:切换频率较高的场景
    特点：不展示的DOM元素未备移除，仅仅是使用样式隐藏掉

    
    -->

    <div id="root">
        <!--平凡切换的使用v-show ，效率高-->

        <!--使用v-show做条件渲染-->
        <div v-show="show_one">邓紫棋</div>
        <button @click="show_one=!show_one">v-show切换</button>

        <!--使用v-if做条件渲染-->
        <div v-if="if_one">邓紫棋</div>
        <button @click="if_one=!if_one">v-if切换</button>

        <!--当n变化时，展示不同的div-->
        <div>{{n}}</div>
        <button @click="nname">点击</button>

        <div v-if="n===0">ang</div>
        <div v-else-if="n===1">react</div>
        <div v-else-if="n===2">vue</div>
        <div v-else>啥都不是</div>

        <!-- template只能和v-if在一起使用，不能用v-show-->
        <template v-if="n===1">
               <div>w</div>
               <div>src</div>
               <div>ss</div>
         </template>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                name: "邓紫棋",
                show_one: false,
                if_one: false,
                n: "0"
            },
            methods: {
                nname() {
                    if (this.n < 5) {
                        this.n++
                    }

                }
            },

        })
    </script>
</body>

</html>